<template>
  <div class="mobile-container">
    <div
      ref="cardRef"
      class="card-wrapper"
      :class="{ hidden: cardIsOpen }"
      @click="handleClick"
      :style="{ height }"
    >
      <div class="card-content">
        <div class="card-cover-image-wrapper">
          <slot name="club-image"><img src="http://tantsz.com/public/11.jpg" alt="社团图片"></slot>
        </div>
        <div class="card-text-content">
          <div class="card-title">
<!--            {{ limitText(getName, 10) }}-->
            <slot name="card_title">卡片名称</slot>
          </div>
          <div class="card-description">
            <slot name="card_description">
              卡片描述
            </slot>
          </div>
        </div>
      </div>
      <div class="card-club-content">
        <slot name="card_intro">
          卡片内容
        </slot>
      </div>
    </div>
    <div
      ref="cardCloneRef"
      class="card-wrapper clone"
      :class="{ expand: cardIsOpen }"
      @click="handleClick"
    >
      <div class="card-content">
        <div class="card-cover-image-wrapper">
          <slot name="club-image"><img src="http://tantsz.com/public/11.jpg" alt="社团图片"></slot>
        </div>
        <div class="card-text-content">
          <div class="card-title">
            <slot name="card_title">卡片名称</slot>
          </div>
          <div class="card-description">
            <slot name="card_description">
              卡片描述
            </slot>
          </div>
        </div>
      </div>
      <div class="card-club-content">
        <template v-if="state.option=='html'"><div v-html="state.content"></div></template>
        <template v-if="state.option=='json'">json解释器</template>
<!--        <slot name="card_content">-->
<!--          卡片内容-->
<!--        </slot>-->
      </div>
    </div>
    <br>
    <div class="apply_for_entrance">
      <van-button @click="associationForm" color="#1c7fc1">报名入口</van-button>
    </div>
  </div>
</template>

<script lang="ts">
import {Ref, ref, reactive, defineComponent, watch} from "vue";
import { useStore } from 'vuex';
import {useRouter} from "vue-router";
import {IClubManage} from "../../../interface"
export default defineComponent({
  props: {
    societies: {
      type: Object,
      default: {},
    },
    height: {
      type: String,
      default: "260px",
    },
    club_id:{
      type: Number,
      default:1,
    }
  },
  setup(props) {
    const debug = false;
    const router = useRouter();
    const store = useStore();
    const club_manage:IClubManage = store.state.club_manage;
    const show = ref(false);
    const state = reactive({
      option : 'html',
      content : "",
      json: {} as any
    })
    if(debug){
      console.log(props.club_id)
    }
    watch(()=>props.club_id,()=>{
      fetch("api/club/" + props.club_id + "/page/").then(res=>{
        return res.json()
      }).then(json=>{
        if(json.content.type=='json'){
          state.json = json.content.json;
        }else{
          state.content = json.content.html;
        }
        if (debug){
          console.log(props.club_id)
          console.log(json);
        }
      })
    },{immediate:true})

    const displayLength = ref(70);
    const id = ref(1);
    const isAnime = ref(false);
    const cardIsOpen = ref(false);
    const cardRef = ref<HTMLDivElement | null>(null);
    const cardCloneRef = ref<HTMLDivElement | null>(null);
    function changeShow() {
      show.value = !show.value;
      displayLength.value = displayLength.value == -1 ? 100 : -1;
    }
    function limitText(text: string, len = 100) {
      if (text.length <= len) {
        return text;
      }
      return `${text.substr(0, len)}...`;
    }
    const { toExpand, toFold } = useCardAnime(cardRef, cardCloneRef, cardIsOpen);
    async function handleClick() {
      if (!cardIsOpen.value) {
        toExpand();
      } else {
        toFold();
      }
    }
    const associationForm = function (){
      router.push({
        path:'/form',
        query:{
          clubid:store.state.page,
          type:'new',
        }
      })
    }
    return {
      show,
      state,
      displayLength,
      id,
      cardRef,
      changeShow,
      limitText,
      toExpand,
      toFold,
      isAnime,
      handleClick,
      cardIsOpen,
      cardCloneRef,
      club_manage,
      store,
      associationForm,
    };
  },
  computed: {
    clubs:function (){
      if((this as any).club_manage.init){
        return (this as any).club_manage.clubs
      }else{
        (this as any).store.dispatch('initAllAssociation');
      }
    },
  },
})

function useCardAnime(
  cardRef: Ref<HTMLDivElement | null>,
  cardCloneRef: Ref<HTMLDivElement | null>,
  cardOpen: Ref<boolean>
) {
  async function toExpand() {
    if (!cardRef.value || !cardCloneRef.value) return false;
    const { left, top, width, height } = cardRef.value.getBoundingClientRect();
    const target = cardCloneRef.value;
    target.style.left = `${left}px`;
    target.style.top = `${top}px`;
    target.style.width = `${width}px`;
    target.style.height = `${height}px`;
    target.style.opacity = "1";
    target.style.transition = "none";
    await new Promise((res) => setTimeout(res));
    target.style.transition = "";
    cardOpen.value = !cardOpen.value;
    await new Promise((res) => setTimeout(res));
    target.style.left = "";
    target.style.top = "";
    target.style.width = "";
    target.style.height = "";
  }
  async function toFold() {
    if (!cardRef.value || !cardCloneRef.value) return false;
    const { left, top, width, height } = cardRef.value.getBoundingClientRect();
    const target = cardCloneRef.value;
    target.style.left = `${left}px`;
    target.style.top = `${top}px`;
    target.style.width = `${width}px`;
    target.style.height = `${height}px`;
    cardOpen.value = !cardOpen.value;
    window.document.body.style.overflow = "hidden";
    target.scrollTo({ top: 0, behavior: "smooth" });
    window.addEventListener("transitionend", async function removeOpacity(e) {
      if (e.target === target) {
        await new Promise((res) => this.setTimeout(res, 100));
        target.style.pointerEvents = "";
        target.style.opacity = "";
        target.style.transition = "none";
        window.document.body.style.overflow = "";
        await new Promise((res) => this.setTimeout(res, 30));
        target.style.transition = "";
        window.removeEventListener("transitionend", removeOpacity);
      }
    });
  }
  return {
    toExpand,
    toFold,
  };
}
</script>

<style lang="scss" >
.mobile-container {
  width: 100%;
}
.card-wrapper {
  width: 100%;
  height: 220px;
  border-radius: 19px;
  overflow: hidden;
  box-shadow: 0 7px 36px -12px rgba($color: #000000, $alpha: 0.8);
  transition: 0.1s ease;
  perspective: 1600px;
  &:not(.expand):active {
    transform: scale(0.9);
  }

  .card-content {
    width: 100%;
    height: 100%;
    position: relative;
    max-height: 100vw;
    .card-cover-image-wrapper {
      width: 100%;
      height: 100%;
      position: relative;
      &::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(0deg, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0));
        transition: 0.3s;
        pointer-events: none;
      }
      img {
        width: 100%;
        height: 100%;
        display: block;
        object-fit: cover;
        object-position: center;
      }
    }
    .card-text-content {
      position: absolute;
      bottom: 0;
      color: rgba($color: #fff, $alpha: 0.8);
      text-align: left;
      padding-left: 20px;
      padding-bottom: 10px;
      .card-title {
        font-size: 1.6rem;
        font-weight: bold;
        line-height: 1.3em;
        letter-spacing: 0.15em;
        text-shadow: 0 0 6px;
      }
      .card-description {
        font-size: 16px;
        color: rgba($color: #fff, $alpha: 0.7);
      }
    }
  }
  &.clone {
    position: fixed;
    opacity: 0;
    pointer-events: none;
    margin: 0;
    transition: 0.4s ease-in-out;
    z-index: 1000;
  }
  &.expand {
    &.clone {
      pointer-events: all;
    }
    opacity: 1;
    position: fixed;
    border-radius: 0;
    top: 0;
    margin: 0;
    left: 0;
    height: 100vh;
    overflow: auto;
    width: 100vw;
    box-shadow: 0 7px 36px -12px rgba($color: #000000, $alpha: 0);
    z-index: 1000;
    .card-cover-image-wrapper {
      &:before {
        background: linear-gradient(0deg, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0));
      }
    }
    .card-club-content {
      min-height: 100%;
    }
  }
  &.hidden {
    opacity: 0;
    pointer-events: none;
  }
  .card-club-content {
    background: rgb(245, 245, 245);
    padding: 20px;
    text-align: left;
    color: #474747;
  }
  .apply_for_entrance{
    position: fixed;
    bottom: 30px;
    left: 20px;
  }
}
</style>
